<template>
    <div class="flex_row card2 p10">
        <div class="flex_col">
            <HolidayParts2 :color="props.color" class="flex_start_self" :info="props.info.holiday" />
            <div class="flex_row_center mt5">
                <label :style="{ color: props.color }">可用年假天数:</label>
                <label :style="{ color: props.color }" style="font-size: larger;">{{ props.info.days }}</label>
            </div>
        </div>
        <div class="flex_col card2 p10" style="margin-left: 20px;">
            <el-table empty-text="" :data="mapTableData(props.info.leaves)">
                <el-table-column prop="date" label="请假开始日期" width="150px" />
                <el-table-column prop="days" label="请假天数" width="100px" />
            </el-table>
            <div class="flex_row_center mt5">
                <label>请假总天数:</label>
                <label>{{ props.info.leave_days }}</label>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { LeaveInfo, ServicePartInfo } from '@/service/api';
import HolidayParts2 from './HolidayParts2.vue';
import { TIMES } from '@/service/global';

interface Ctx {
    info: ServicePartInfo
    color: string,
}

const props = defineProps<Ctx>();

interface TableData {
    date: string,
    days: number,
}

function mapTableData(leaves: LeaveInfo[]) {
    return leaves.map<TableData>((item) => {
        return {
            date: `${item.date} ${TIMES[item.time]}`,
            days: item.days
        }
    })
}


</script>
